<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="plugins/axios/axios.min.js"></script>
    <script src="plugins/vue/vue.js"></script>
    <script src="plugins/vue/vue.js"></script>
    <script src="plugins/util.js"></script>
</head>
<body>
<div id="app">
    <button type="button" @click="add()">添加</button>
    <table border="1">
        <tr>
            <td>id</td>
            <td>userid</td>
            <td>姓名</td>
            <td>名称</td>
            <td>价格</td>
            <td>数量</td>
            <td>地址</td>
            <td>操作</td>
        </tr>
        <tr v-for="o in order.records">
            <td>{{o.id}}</td>
            <td>{{o.userId}}</td>
            <td>{{o.user.username}}</td>
            <td>{{o.name}}</td>
            <td>{{o.price}}</td>
            <td>{{o.num}}</td>
            <td>{{o.user.address}}</td>
            <td>
                <button type="button" @click="del(o.id)">删除</button>
                <button type="button" @click="hx(o.id)">修改</button>
            </td>
        </tr>
    </table>
    <button type="button" @click="findAll(1)">首页</button>
    <button type="button" @click="findAll(order.current-1)">上一页</button>
    <button type="button" @click="findAll(order.current+1)">下一页</button>
    <button type="button" @click="findAll(order.pages)">尾页</button>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            order:{},
        },
        created(){
            this.findAll(1)
        },
        methods:{
            hx(id){
                location.href="edit.html?id="+id
            },
            add(){
                location.href="add.html"
            },
            del(id){
                axios.post("/order/del?id="+id).then(res=>{
                    alert("删除成功");
                    location.href="index.html"
                })
            },
            findAll(page){
                axios.get("/order/all?page="+page).then(res=>{
                    this.order = res.data
                })
            }
        }

    })
</script>
</body>
</html>